<template>
  <div class="home">
    <nav-title :title="title"></nav-title>
    <home-search></home-search>
    <home-type :type="item" v-for="(item , index ) of movies" :key="index" :titletype="index"></home-type>
  </div>
</template>

<script>
import NavTitle from "../../components/NavTitle";
import HomeSearch from "./components/Search";
import HomeType from "./components/Type";
import axios from "axios-jsonp-pro";
export default {
  name: "home",
  components: {
    NavTitle,
    HomeSearch,
    HomeType,
  },
  data() {
    return {
      title:"电影",
      movies: {
        top250: {
          type:"top250",
        },
        coming_soon: {
          type:"coming_soon",          
        },
        in_theaters: {
          type:"in_theaters",          
        }
      }
    };
  },
  mounted() {
    var baseUrl = "https://douban.uieee.com/v2/movie/";
    axios.jsonp(baseUrl + "top250").then(res => {
      this.movies.top250 = this.handledata(res);
    });
    axios.jsonp(baseUrl + "in_theaters").then(res => {
      this.movies.in_theaters = this.handledata(res);
    });
    axios.jsonp(baseUrl + "coming_soon").then(res => {
      this.movies.coming_soon = this.handledata(res);
    });
  },
  methods: {
    handledata(res) {
      console.log(res)
      var list = {};
      var { title, subjects } = res;
      list.title = title;
      list.subjects = subjects.slice(0, 3);
      return list;
    }
  }
};
</script>
<style lang="scss" scoped>
.home {  
  background: #eee;
  
  margin-top: 90px;
}
</style>

